<!--
*  2021-03-15
*  坯布出库单解锁
-->
<template>
  <div id="app" class="weaving-grey-store-unlock">
    <!-- 头部导航 -->
    <van-nav-bar :title="title" ref="header" left-text="返回" left-arrow @click-left="onClickLeft">
      <template #right>
        <span @click="onClickStart"><van-icon name="plus" size="20" /></span>
      </template>
    </van-nav-bar>
    <van-cell title="总匹数：" :value="tableData.length"></van-cell>
    <van-cell-group style="height: 87vh;overflow: auto;">
      <van-swipe-cell v-for="(dd, index) in tableData" :key="index">
        <van-cell :title="dd.designNo" :label="dd.receiveAt" :value="'匹号：' + dd.designSeqNo"></van-cell>
        <template #right>
          <van-button square type="danger" text="删除" style="height: 100%" @click="onClickDelAll(index)"/>
        </template>
      </van-swipe-cell>
    </van-cell-group>
    <van-cell-group class="weaving-package-btn">
      <van-button block type="info" class="bgColor" @click="onConfirmSubmit">确认解锁</van-button>
    </van-cell-group>
  </div>
</template>

<script>
import { openWin } from "@/utils/index";
import { getGreyClothGet, getGreyClothUnlock } from "@/api/cloth";

export default {
  name: "storeLock",
  data() {
    return {
      title: "坯布出库单解锁",
      tableData: [],
      formStoreOutId: 0,
      storeOutId: 0,
      greyClothIds: "",
    };
  },
  created() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    //初始化
    initFn(that) {
      that.formStoreOutId = window.api.pageParam.storeId;
      window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });
    },
    // 返回
    onClickLeft() {
      openWin("cloth-store", {
        dateTime: window.api.pageParam.dateTime,
      });
    },
    // 扫码
    onClickStart() {
      const that = this;
      const zyHmsScan = api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          let id = ret.result;
          if(that.tableData.every(s => s.id != id)) {
            // 坯布ID 获取坯布信息 getGreyClothPub
            getGreyClothGet(id.toString(), res => {
              that.tableData.push(res);
              that.onClickStart();
            });
          } else {
            that.$toast.fail("坯布已存在");
          }
        }
      });
    },
    // 删除
    onClickDelAll(index) {
      this.tableData.splice(index, 1);
    },
    // 解锁
    onConfirmSubmit() {
      const that = this;
      if (this.tableData.length) {
        this.greyClothIds = "";
        this.tableData.forEach((item) => {
          this.greyClothIds +=
            this.greyClothIds == "" ? item.id : "," + item.id;
        });
        getGreyClothUnlock(
          {
            outId: this.formStoreOutId,
            greyClothIds: this.greyClothIds,
          },
          () => {
            that.$toast({
              type: "success",
              message: "解锁成功",
              onClose: () => {
                openWin("cloth-store", {
                  dateTime: window.api.pageParam.dateTime,
                });
              },
            });
          }
        );
      }
    },
  },
};
</script>

<style lang="scss">
.weaving-grey-store-unlock {
  display: flex;
  flex-direction: column;
  .van-cell {
    .van-cell__value {
      flex: 0 0 30%;
      .van-field {
        padding: 0;
        display: flex;
        .van-cell__value {
          flex: 1;
        }
        .van-field__control {
          text-align: right;
        }
      }
    }
  }
  .weaving-package-btn {
    padding: 16px;
    &.van-hairline--top-bottom::after,
    .van-hairline-unset--top-bottom::after {
      border-width: 0;
    }
  }
}
</style>
